<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width">
    <title>好顾家装修平台手机版</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://m.haogujia.com/themes/default/mobile/static/css/public.css">
    <link rel="stylesheet" href="http://m.haogujia.com/themes/default/mobile/static/css/style.css">
    <link rel="stylesheet" href="./styles/site.css">
    <script src="http://z.haogujia.com/static/script/kt.j.js"></script>
</head>
<body>
<div class="main main_apply">
    <section class="auto_height"><img src="images/apply/img_1.jpg" class="auto_pos"></section>
    <section class="auto_height"><img src="images/apply/img_2.jpg" class="auto_pos"></section>
    <section class="auto_height"><img src="images/apply/img_3.jpg" class="auto_pos"></section>
    <section class="form_wrap auto_height">
        <div class="flex flex_center">
            <div class="flex_item">
                <h2>免费获取设计报价方案</h2>
                <h3>您的信息将被严格保密 仅供装修使用</h3>
                <div class="form_inner">
                    <p class="input_wrap">
                        <input type="tel" maxlength="11" id="mobile" placeholder="请填写您的手机号码"/>
                    </p>
                    <p class="input_wrap">
                        <input type="text" maxlength="20" id="name" placeholder="请输入您的姓名"/>
                    </p>
                    <div class="clear_fix">
                        <p class="select_wrap f_left">
                            <select id="province">
                                <option value="1">上海</option>
                                <option value="2">北京</option>
                                <option value="3">成都</option>
                            </select>
                        </p>
                        <p class="select_wrap f_right">
                            <select id="city">
                                <option value="1">黄埔</option>
                                <option value="2">长宁</option>
                                <option value="3">张江</option>
                            </select>
                        </p>
                    </div>
                    <p class="input_wrap">
                        <input type="number" maxlength="20" id="area" placeholder="请输入您的房屋面积"/>
                    </p>
                    <div class="btn_wrap">
                        <button class="submit_btn" id="submit">免费申请服务</button>
                    </div>
                    <p class="info">今日已有<span id="applyCount">456</span>人申请设计报价方案</p>
                </div>
            </div>
        </div>
        <img src="images/apply/img_4.jpg" class="auto_pos">
    </section>
    <section class="auto_height"><img src="images/apply/img_5.jpg" class="auto_pos"></section>
    <section class="auto_height"><img src="images/apply/img_6.jpg" class="auto_pos"></section>
    <section class="auto_height"><img src="images/apply/img_7.jpg" class="auto_pos"></section>
    <section class="auto_height"><img src="images/apply/img_8.jpg" class="auto_pos"></section>
    <section class="auto_height"><img src="images/apply/img_9.jpg" class="auto_pos"></section>
    <section class="auto_height"><img src="images/apply/img_10.jpg" class="auto_pos"></section>
    <div class="pop hide">
        <i class="close_btn" id="closePop"></i>
        <div class="wrap">
            <p>
                恭喜您，申请成功！<br>
                您的联系方式为：<b id="mobile_wrap"></b>，好顾家装修网客服人员将于1个工作日内与您取得联系！<br>
                请保持手机畅通！
            </p>
            <a href="ok.html">我知道了</a>
        </div>
    </div>
    <div class="cover hide"></div>
</div>
<script>
    var pop = {
        show: function (mobile) {
            var pop = $('.pop'),
                cover = $('.cover');
            pop.removeClass('hide').find('#mobile_wrap').text(mobile);
            cover.removeClass('hide');
            setTimeout(function () {
                pop.addClass('active');
                cover.addClass('active');
            }, 0);
        },
        hide: function () {
            var pop = $('.pop'),
                cover = $('.cover');
            pop.removeClass('active');
            cover.removeClass('active');
            setTimeout(function () {
                pop.addClass('hide');
                cover.addClass('hide');
            }, 500);
        }
    };
    var iToast = {
        timers: [],
        duration: 0,
        node: null,
        countdown: function () {
            var self = this;
            var t = setTimeout(function () {
                self.close();
            }, self.duration);
            this.timers.push(t);
        },
        close: function () {
            var self = this;
            this.node.removeClass('active');
            const t = setTimeout(function () {
                self.node.remove();
                self.onClose && self.onClose();
                self.node = null;
            }, 700);
            self.timers.push(t);
        },
        show: function (content, duration, onClose) {
            duration = duration || 1500;
            var self = this;
            self.timers.forEach(function (timer) {
                window.clearTimeout(timer);
            });
            this.timers = [];
            this.duration = duration + 700;
            this.onClose = onClose;
            if (this.node) {
                this.node.text(content);
            } else {
                this.node = $('<div class="global_toast">' + content + '</div>').appendTo($('body'));
            }
            setTimeout(function () {
                self.node.addClass('active');
                self.countdown();
            }, 0);
        }
    };
    $(function () {
        $('#submit').click(function () {
            var mobile = $.trim($('#mobile').val()),
                name = $.trim($('#name').val()),
                area = $.trim($('#area').val()),
                province = $('#province').val(),
                city = $('#city').val();
            if (!mobile) {
                iToast.show('手机号码不能为空');
                return;
            }
            if (!/^1\d{10}$/.test(mobile)) {
                iToast.show('手机号码格式不正确');
                return;
            }
            if (!name) {
                iToast.show('请输入您的姓名');
                return;
            }
            if (!province) {
                iToast.show('请选择所在省份');
                return;
            }
            if (!city) {
                iToast.show('请选择所在城市');
                return;
            }
            if (!area) {
                iToast.show('请填写房屋面积');
                return;
            }
            //todo
            pop.show(mobile);
        });
        $('#closePop').click(function () {
            pop.hide();
        });
        //设置已申请人数
        (function () {
            var i = 456;
            setInterval(function () {
                $('#applyCount').text(++i);
            }, 600000);
        })();
    });
</script>
<div class="footer">
    <div class="footer_cont">
        <p><font class="on">触屏版</font><font class="bgray">|</font><a
                href="http://m.haogujia.com/index-force-web.html"><font class="f14">电脑版</font></a></p>
        <p><font class="f12">手机版好顾家装修网</font><font class="f12">鲁ICP备13014078号</font></p>
    </div>
</div>
</body>
</html>